<template>
  <div class="page-main">
    <home-nav :userData="userinfo"></home-nav>
    <div class="container">
      <div class="head-content">
        <span class="bold-font">合同验收/付款审批表</span>
        <ul>          
          <li><span class="iconfont icon-shenpi1"></span>报工单详情</li>
          <li><span class="iconfont icon-kecheng"></span>合同附件</li>          
        </ul>
        <div class="btn-line">
          <a-button class="hte-btn add-btn" type="primary">保存</a-button>
          <a-button class="hte-btn">提交审批</a-button>
        </div>
      </div>
      <div class="content">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <section>
            <div class="section-header">合同基本信息</div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="申请流水号">
                  <a-input v-model="form.projectClass" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item ref="projectRealName" label="申请人/部门" prop="projectRealName">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请时间">
                  <a-date-picker valueFormat="YYYY-MM-DD HH:mm:ss" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="合同编号">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item
                  label="合同名称"
                >
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="合同金额" prop="projectRealName">
                  <a-input v-model="form.hatchProjectName" disabled placeholder="单位：元" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="签订公司">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="供应商名称">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="采购订单号">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="所属项目名称">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="费用支出号">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="项目经理">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同签订人" prop="projectRealName">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同跟进专员" prop="projectRealName">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
          </section>
          <section>
            <div class="section-header">节点完成情况</div>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item
                  label="工期节点内容"
                  prop="projectRealName"
                >
                  <a-input v-model="form.lastProjectNo" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item
                  label="付款节点内容"
                  prop="projectRealName"
                >
                  <a-input v-model="form.lastProjectNo" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="项目负责人">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="付款节点标志">
                  <a-select default-value="是" disabled>
                    <a-select-option value="是"> 是 </a-select-option>
                    <a-select-option value="否"> 否 </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="凭保证函付款" prop="projectName">
                  <a-select default-value="是">
                    <a-select-option value="是"> 是 </a-select-option>
                    <a-select-option value="否"> 否 </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item class="col-input-2 col-input-font" label="工期节点进度">
                  <a-select default-value="已逾期" disabled>
                    <a-select-option value="已逾期"> 已逾期 </a-select-option>
                    <a-select-option value="合同报工2"> 合同报工 2 </a-select-option>
                  </a-select>
                  <a-select default-value="10天" disabled>
                    <a-select-option value="10天"> 10天 </a-select-option>
                    <a-select-option value="20天"> 20天 </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="逾期责任方">
                  <a-select default-value="甲方原因" disabled>
                    <a-select-option value="甲方原因"> 甲方原因 </a-select-option>
                    <a-select-option value="乙方原因"> 乙方原因 </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="工期节点质量" prop="projectName">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="合同节点标志">
                  <a-select default-value="已逾期" disabled>
                    <a-select-option value="已逾期"> 已逾期 </a-select-option>
                    <a-select-option value="合同报工2"> 合同报工 2 </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同资料情况" prop="projectName">
                  <a-select>
                    <a-select-option value="1"> 有资料待归档 </a-select-option>
                    <a-select-option value="0"> 否 </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="项目所在地" prop="projectName">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="验收参与部门" prop="projectName">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="验收参与人" prop="projectName">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="设备所在位置" prop="projectName">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="成本中心号">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="质保年限" prop="projectName">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="质保期限" prop="projectName">
                  <a-date-picker valueFormat="YYYY-MM-DD"/>
                </a-form-model-item>
              </a-col>
            </a-row>
          </section>
          <section>
            <div class="section-header">合同付款信息</div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item class="col-input-2" label="PO单行号">
                  <a-select default-value="10行" disabled>
                    <a-select-option value="10行"> 10行 </a-select-option>
                    <a-select-option value="12行"> 12行 </a-select-option>
                  </a-select>
                  <a-input v-model="form.projectNo" default-value="共60行" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="行政金额(含税)">
                  <a-input v-model="form.hatchProjectName" disabled placeholder="单位：元" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="水电费承担方">
                  <div class="disabled-radio">
                    <a-radio-group name="radioGroup" :default-value="2" disabled>
                      <a-radio :value="1"> 甲方 </a-radio>
                      <a-radio :value="2"> 乙方 </a-radio>
                    </a-radio-group>
                  </div>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="税率">
                  <a-input v-model="form.hatchProjectName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="本次支付金额(含税)">
                  <a-input v-model="form.hatchProjectName" placeholder="单位：元" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="本次过账金额(含税)">
                  <a-input v-model="form.hatchProjectName" placeholder="单位：元" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item
                  label="补充说明"
                >                 
                  <a-textarea
                    v-model="form.lastProjectNo"
                    disabled
                    placeholder="请输入"
                    :auto-size="{ minRows: 3 }"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item
                  label="详细说明"
                >
                  <a-textarea
                    v-model="form.mes"
                    placeholder="请输入"
                    :auto-size="{ minRows: 3 }"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>

            <div class="line-section">
              <span>累计质量、进度扣罚金额：</span>
              <span>扣款金额合计(元)：<i>3000</i></span>
              <span>减少开票金额合计(元)：<i>1000</i></span>
            </div>
            <a-table
              class="hte-table-content"
              :columns="payColumns"
              :data-source="paySourceData"
              :pagination="pagination"
              rowKey="id"
              :loading="tabLoading"
              bordered
              size="middle"
              @change="pageChange"
            >
              <template slot="num" slot-scope="text, record, index">
                {{ (currPageIndex - 1) * currPageSize + parseInt(index) + 1 }}
              </template>
              <template slot="id" slot-scope="text">
                <span class="font-active">{{ text }}</span>
              </template>
              <template slot="num2" slot-scope="text">
                <span class="font-active">{{ text }}</span>
              </template>
              <template slot="b" slot-scope="text, record">
                <a-select v-model="record.b">
                  <a-select-option value="是"> 是 </a-select-option>
                  <a-select-option value="否"> 否 </a-select-option>
                </a-select>
              </template>
              <template slot="c" slot-scope="text, record">
                <a-select v-model="record.c">
                  <a-select-option value="是"> 是 </a-select-option>
                  <a-select-option value="否"> 否 </a-select-option>
                </a-select>
              </template>
              <template slot="d" slot-scope="text, record">
                <a-select v-model="record.b">
                  <a-select-option value="是"> 是 </a-select-option>
                  <a-select-option value="否"> 否 </a-select-option>
                </a-select>
              </template>
            </a-table>
          </section>
          <section>
            <div class="section-header">附件列表</div>
            <div class="section-table">
              <div>
                <div class="btn-box">
                  <a-button class="hte-btn add-btn" type="primary">插入</a-button>
                  <a-button class="hte-btn">上传</a-button>
                  <a-button class="hte-btn">下载</a-button>
                  <a-button class="hte-btn">刷新</a-button>
                </div>
                <a-table
                  class="hte-table-content"
                  :columns="reservationColumns"
                  :data-source="reservationData"
                  :pagination="pagination"
                  rowKey="id"
                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                  :loading="tabLoading"
                  bordered
                  size="middle"
                  @change="pageChange"
                >
                  <template slot="num" slot-scope="text, record, index">
                    {{ (currPageIndex - 1) * currPageSize + parseInt(index) + 1 }}
                  </template>
                </a-table>
              </div>
            </div>
          </section>
        </a-form-model>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractPayApproval',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      form: {
        id: '',
        projectClass: '10232323',
        projectNo: '',
        projectName: '',
        mainDeptName: '',
        projectTypeSubCategory: '',
        hatchProjectId: '',
        hatchProjectNo: '',
        hatchProjectName: '',
        lastProjectNo: '',
        lastProjectName: '',
        keywords: '',
        highTechType: '',
        isHighTechProject: false,
        isHighTechProjectText: '',
        projectContent: '',
        projectUseFor: '',
        isNeedEngineeringMotion: null,
        motionProjectNameOrNo: '',
        functionAndPerformance: '',
        sourceBefore: '',
        technologyTarget: '',
        economyTarget: '',
        name: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      rules: {
        projectName: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur',
          },
        ],
        projectRealName: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur',
          },
        ],
        // 设置必填项
      },
      payInfoList: [],
      reportInfoList: [],
      progress: { payInfoList: [], reportInfoList: [] },
      reservationColumns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          width: '7%',
          align: 'center',
          scopedSlots: { customRender: 'num' },
        },
        {
          title: '上传文件名称',
          dataIndex: 'teamName',
          width: '63%',
          align: 'left',
        },
        {
          title: '上传人',
          dataIndex: 'delayTotal',
          width: '15%',
          align: 'center',
        },
        {
          title: '上传时间',
          dataIndex: 'time',
          width: '15%',
          align: 'center',
        },
      ],
      reservationData: [],
      selectedRowKeys: [],
      pagination: {
        total: 0,
        current: 1,
      },
      tabLoading: false,
      currPageIndex: 1,
      currPageSize: 10,
      payColumns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          width: '5%',
          align: 'center',
          scopedSlots: { customRender: 'num' },
        },
        {
          title: '质量通知单号',
          dataIndex: 'id',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'id' },
        },
        {
          title: 'OA流水号',
          dataIndex: 'num2',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'num2' },
        },
        {
          title: '违约类型',
          dataIndex: 'b',
          width: '20%',
          align: 'center',
          scopedSlots: { customRender: 'b' },
        },
        {
          title: '审批扣罚金额',
          dataIndex: 'a',
          width: '15%',
          align: 'center',
        },
        {
          title: '开票金额',
          dataIndex: 'c',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'c' },
        },
        {
          title: '本次扣罚',
          dataIndex: 'd',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'd' },
        },
      ],
      paySourceData: [
        { id: 'X112223356', num2: 2021986956, a: 2000, c: '是' },
        { id: 'Z222222222', num2: 2021986957, a: 2000, c: '否' },
      ],
    }
  },
  mounted() {},
  methods: {
    handledDelFile(item) {},
    pageChange() {
      this.currPageIndex = page.current
      this.currPageSize = page.pageSize
      this.pagination.current = page.current
      // this.getConTaskListData()
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .line-section {
    padding: 15px 0;
    margin-top: 40px;
    border-top: 1px solid #f2f2f2;
    color: #333;
    > span {
      padding-right: 25px;
      &:first-child {
        font-weight: bold;
        font-size: 15px;
      }
      i {
        color: red;
      }
    }
  }
}
</style>
